<template>
  <div>
    <div class="flex my-3">
      <dmb-form
        :model-value="FormData"
        :form-items="formBase"
        :item-style="itemStyle"
        :colLayout="colLayout"
        label-position="top"
        @update="(value) => FormData = value"
        class="flex-1"
      />
      <div class="ml-3">
        <div class="flex">
          <div class="flex flex-col mr-3">
            <label for="volumeWeight" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">体积重量</label>
            <el-input-number v-model="FormData.volumeWeight" :precision="2" :step="1" step-strictly disabled />
          </div>
          <div class="flex flex-col">
            <label for="longs" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">长</label>
            <el-input-number v-model="FormData.longs" :precision="0" :step="1" step-strictly />
          </div>
        </div>
        <div class="flex">
          <div class="flex flex-col mr-3">
            <label for="widths" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">宽</label>
            <el-input-number v-model="FormData.widths" :precision="0" :step="1" step-strictly />
          </div>
          <div class="flex flex-col">
            <label for="heights" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">高</label>
            <el-input-number v-model="FormData.heights" :precision="0" :step="1" step-strictly />
          </div>
        </div>
      </div>
      <div class="ml-3">
        <div class="flex">
          <div class="flex flex-col mr-3">
            <label for="courierNumber" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">快递单号</label>
            <el-input v-model="FormData.courierNumber" placeholder="请输入快递单号" />
          </div>
          <div class="flex flex-col">
            <label for="userId" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">会员编号</label>
            <el-input v-model="FormData.userId" :disabled="FormData.userId !== 1" placeholder="请输入会员编号" />
          </div>
        </div>
        <div class="flex">
          <div class="flex flex-col mr-3">
            <label for="weight" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">重量</label>
            <el-input-number v-model="FormData.weight" :precision="2" :step="1" step-strictly />
          </div>
          <div class="flex flex-col">
            <label for="assignedLocationName" class="font-bold text-[14px] text-[#606266] h-[36px] leading-[36px]">存放库位</label>
            <el-input v-model="FormData.assignedLocationName" placeholder="请点击下方库位按钮获取库位号" disabled />
          </div>
        </div>
        <div class="mt-3">
          <el-button type="primary" @click="putWarehouse">入库</el-button>
          <el-button type="success" @click="getCourierInfo">查询快递</el-button>
          <el-button type="info" @click="getUserInfo">查询用户</el-button>
          <el-button type="warning" @click="computeSeat">库位号</el-button>
        </div>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column  prop="warehouseId" label="入库ID" />
      <el-table-column  prop="userId" label="会员ID" />
      <el-table-column  prop="userName" label="会员昵称" />
      <el-table-column  prop="companyName" label="快递公司" />
      <el-table-column  prop="courierNumber" label="快递单号" />
      <el-table-column  prop="cargoName" label="商品名称" />
      <el-table-column  prop="cargoQuantity" label="货物数量" />
      <el-table-column  prop="inventoryScanner" label="入库扫描员" />
      <el-table-column  prop="weight" label="重量" />
      <el-table-column  prop="volumeWeight" label="体积重" />
      <el-table-column  prop="cargoDimensions" label="货物尺寸" />
      <el-table-column  prop="locationName" label="存放库区" />
      <el-table-column  prop="remarks" label="备注" />
      <el-table-column  prop="advancePayment" label="垫付费" />
      <el-table-column  prop="extraFee" label="超长费" />
      <el-table-column  prop="shopName" label="店铺" />
      <el-table-column  prop="cargoType" label="货物类型" />
    </el-table>
  </div>
</template>

<script>
  import dmbForm from '@/components/DmbForm'
  import { defaultConfig, formBase, itemStyle } from './config'
  import { addWarehouse, getuUserInfo, computeVolume, getCourier } from '@/api/recive/warehouse'
  import { deepClone } from '@/utils'

  export default {
    name: 'warehouse',
    components: { dmbForm },
    computed: {
      itemStyle() { return itemStyle },
      formBase() { return formBase },
      colLayout() {
        return { xl: 4, lg: 8, md: 12, sm: 24, xs: 48 }
      }
    },
    data() {
      return {
        FormData: deepClone(defaultConfig), // 表单参数
        tableData: [] // 表格展示数据
      }
    },
    methods: {
      // 入库
      putWarehouse() {
        if (this.FormData.weight > 0) {
          const { widths, longs, heights } = this.FormData
          this.FormData.cargoDimensions = `${widths}*${longs}*${heights}`
          addWarehouse(this.FormData).then((res) => {
            const isOperate = this.tableData.some((item) => { return item.id === res.data.id }) // 判断表格中是否存在该条数据
            if (!isOperate) {
              this.tableData.push(res.data);
            }
            console.log(isOperate, this.tableData);
          })
        } else {
          this.$message.warning("重量不可为0!");
        }
      },
      // 获取用户信息
      async getUserInfo() {
        const res = await getuUserInfo(this.FormData.userId)
        this.FormData.userName = res.data.userName
      },
      //计算库位号
      computeSeat() {
        const { widths, longs, heights, weight, userId } = this.FormData
        const config = { widths, longs, heights, weight: Number(weight), userId }
        computeVolume(config).then(res => {
          this.FormData = Object.assign(deepClone(this.FormData), res.data)
        })
      },
      // 查询快递信息
      getCourierInfo() {
        if (this.FormData.courierNumber.length > 0) {
          getCourier(this.FormData.courierNumber).then(res => {
            const { second, ...residue } = res.data
            // 判断当前是否二次入库
            if(Number(second) === 2) {
              this.$confirm("当前订单是否二次入库？", "确认信息", {
                distinguishCancelAndClose: true,
                confirmButtonText: "确认",
                cancelButtonText: "取消"
              }).then(() => {
                this.FormData = Object.assign(deepClone(defaultConfig), deepClone(this.FormData), residue)
              }).catch(() => {
                this.FormData = deepClone(defaultConfig)
              })
            } else {
              this.FormData = Object.assign(deepClone(defaultConfig), deepClone(this.FormData), residue)
              console.log(this.FormData)
            }
          })
        } else {
          this.$message.warning('请输入快递单号!')
        }
      }
    }
  }
</script>

<style>

</style>
